function Enlarge(classname){
    this.box = document.querySelector('.'+classname);
    this.middleBox = this.box.querySelector('.middleBox')
    this.bigBox = this.box.querySelector('.bigBox')
    this.middleImg = this.box.querySelector('.middleBox>img')
    this.bigImg = this.box.querySelector('.bigBox>img')
    this.mask = this.box.querySelector('.mask')
    this.smallImgs = this.box.querySelectorAll('.smallBox img')
}
// 绑定事件
Enlarge.prototype.bindEvent = function(){
    // tab切换
    for(let i=0;i<this.smallImgs.length;i++){
        this.smallImgs[i].onclick = ()=>{
            for(let j=0;j<this.smallImgs.length;j++){
                this.smallImgs[j].className = '';
            }
            this.smallImgs[i].className = 'active';
            // 换中图和大图
            this.middleImg.setAttribute('src',this.smallImgs[i].getAttribute('src'))

            this.bigImg.setAttribute('src',this.smallImgs[i].getAttribute('src'))
        }
    }

    // 移入
    this.middleBox.onmouseover = ()=>{
        this.mask.style.display = 'block';
        this.bigBox.style.display = 'block';
        // 移动
        this.middleBox.onmousemove = ()=>{
            var e = window.event;
            var x = e.pageX;
            var y = e.pageY;
            var l = x - this.mask.offsetWidth/2 - this.middleBox.offsetLeft;
            var t = y - this.mask.offsetHeight/2 - this.middleBox.offsetTop;
            if(l<0){
                l=0
            }
            if(t<0){
                t=0
            }
            if(l>this.middleBox.clientWidth-this.mask.offsetWidth){
                l = this.middleBox.clientWidth-this.mask.offsetWidth
            }
            if(t>this.middleBox.clientHeight-this.mask.offsetHeight){
                t = this.middleBox.clientHeight-this.mask.offsetHeight
            }
            this.mask.style.left = l + 'px'
            this.mask.style.top = t + 'px'

            // 计算大图移动
            var bigX = l/this.middleBox.clientWidth*this.bigImg.clientWidth
            var bigY = t/this.middleBox.clientHeight*this.bigImg.clientHeight
            this.bigImg.style.left = -bigX + 'px'
            this.bigImg.style.top = -bigY + 'px'
        }
    }
    this.middleBox.onmouseout = ()=>{
        this.mask.style.display = 'none';
        this.bigBox.style.display = 'none';
    }
}
var e = new Enlarge('enlarge')

e.bindEvent()